<template>
  <a-modal
    title="OCR识别-数据映射"
    :width="'90%'"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel">
    <a-row :gutter="18">
      <a-col :span="8">
        <a-table
          size="middle"
          bordered
          :rowKey="rowKey"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="false"
          :loading="loading"
          :customRow="customRowFn"
          :scroll="{ y: 240 }">
        </a-table>
      </a-col>
      <a-col :span="16">
        <a-card :bordered="false" :head-style="{padding:0}" :body-style="{padding:0}">
          <h3 v-if="hasSelected">已选择： {{selectedRows[0].comment}}</h3>
          <a-table 
            size="middle" 
            :rowKey="rowKey" 
            bordered
            :pagination="false"
            :scroll="{ y: 440 }"
            :loading="loading"
            :row-selection="rowSelection"
            :columns="fieldColumns" 
            :dataSource="fieldDataSource">
          </a-table>
        </a-card>
      </a-col>
    </a-row>

  </a-modal>
</template>

<script>
  import Vue from 'vue'
  import { mapGetters } from 'vuex'
  import { USER_INFO } from "@/store/mutation-types"
  import { getAction, postAction, deleteAction } from '@/api/manage'
  import { cloneObject, pushIfNotExist } from '@/utils/util'

  export default {
    name: 'MappingModal',
    data() {
      return {
        title: '操作',
        visible: false,
        confirmLoading: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        rowKey: 'dataId',
        columns: [
          {
              title: '数据表',
              dataIndex: 'title',
              key: 'title',
              scopedSlots: { customRender: 'title' }
          },
        ],
        fieldColumns: [
          {
              title: '映射字段',
              dataIndex: 'name',
              key: 'name',
              scopedSlots: { customRender: 'name' }
          },
          {
              title: '映射字段描述',
              dataIndex: 'comment',
              key: 'comment',
              scopedSlots: { customRender: 'comment' }
          },
        ],
        dataSource: [],
        fieldDataSource: [],
        loading: true,
        selectedRowKeys: [],
        selectedRows: [],
        resultData: {
          tableName: '',
          tableTitle: '',
          tableField: '',
          tableFieldText: '',
        }
      }
    },
    created() {
    },
    computed: {
      hasSelected() {
        return this.selectedRows.length > 0;
      },
      rowSelection() {
        let that = this
        return {
          type: "radio", //单选按钮定义
          onChange: (selectedRowKeys, selectedRows) => {
            that.selectedRowKeys = selectedRowKeys
            that.selectedRows = selectedRows
            this.resultData.tableField = selectedRows[0].name
            this.resultData.tableFieldText = selectedRows[0].comment
          }
        };
      }
    },
    methods: {
      ...mapGetters(['doctorId']),
      edit(record, index) {
        this.visible = true
        this.model = Object.assign({doctorId: this.doctorId(), index}, record)
        console.log(this.model)
        this.loadData();
      },
      customRowFn(record) {
        return {
          on: {
            click: () => {
              let key = record[this.rowKey]
              this.selectedRowKeys = []
              this.selectedRows = []
              this.resultData = {
                tableTitle: record.title,
                tableName: record.tableName
              }
              this.loadTableField(key)
            }
          }
        }
      },
      loadData() {
        this.loading = true
        getAction('/ocr/mapping/table/list').then((res) => {
          if (res.success) {
            this.dataSource = res.result.records||res.result;
          }
          if(res.code===510){
            this.$message.warning(res.message)
          }
          this.loading = false;
        }).finally(_ => {
          this.loading = false;
        })
      },
      loadTableField(id) {
        this.loading = true
        getAction('/ocr/mapping/table/fields', {
          tableDataId: id
        }).then((res) => {
          if (res.success) {
            this.fieldDataSource = res.result.records||res.result;
          }
          if(res.code===510){
            this.$message.warning(res.message)
          }
          this.loading = false;
        }).finally(_ => {
          this.loading = false;
        })
      },
      handleSubmit() {
        const that = this

        console.log("this.resultData", this.resultData)
        if(this.resultData.tableField == '' || this.resultData.tableField == undefined || this.resultData.tableField == 'undefined') {
          this.$message.error('请选择映射字段')
          return false
        }
        
        // 触发表单验证
        that.confirmLoading = true
        let data = {
          dataId: this.model.dataId,
          index: this.model.index,
          word: this.model.word,
          mappingEntity: this.resultData.tableName,
          mappingField: this.resultData.tableField,
          mappingText: this.resultData.tableTitle + '-' + this.resultData.tableFieldText
        }
        postAction('/ocr/mapping/save', data).then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            that.$emit('ok', data);
            this.handleCancel();
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.confirmLoading = false;
          // this.handleCancel();
        })
      },
      // 关闭
      handleCancel() {
        this.close()
      },
      close() {
        this.visible = false
        this.selectedRow = []
        this.selectedRowKeys = []
        this.dataSource = []
        this.fieldDataSource = []
        this.resultData = {
          tableName: '',
          tableTitle: '',
          tableField: '',
          tableFieldText: ''
        }
      }
    }
  }
</script>

<style scoped>
.avatar-uploader > .ant-upload {
  width: 104px;
  height: 104px;
}
.ant-upload-select-picture-card i {
  font-size: 49px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.ant-table-tbody .ant-table-row td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.drawer-bootom-button {
  position: absolute;
  bottom: -8px;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
</style>